<template>
  <div class="content">
    <!--   供应商--国家列表弹窗-->
    <el-dialog
      v-dialogDrag
      class="dialog-class"
      :title="$t('market.countryList')"
      model
      :visible.sync="openCountry"
      :close-on-click-modal="false"
      width="60%"
      destroy-on-close
      :before-close="handleClose"
    >
      <div class="public-form">
        <span style="width: 50px">{{ $t('shop.name1') }}<!--名称--></span>
        <el-input v-model.trim="countryPagination.fname" size="mini" style="width: 200px" />
        <el-button type="primary" size="mini" style="margin-left: 20px" @click="handleCountry">{{ $t('btn.search') }}</el-button>
        <el-button type="primary" size="mini" @click="installCoun">{{ $t('btn.add') }}</el-button>
      </div>
      <div>
        <jc-table
          :table-header="tableHeader"
          :table-data="tableCountryData"
          table-height="50vh"
          @clickRow="countrySelectRow"
        >
          <template v-slot:btnSlot="col">
            <el-button type="warning" size="mini" @click="editCoun(col.scope.row)">{{ $t('btn.edit') }}</el-button>
            <el-button type="danger" size="mini" @click="delCountry(col.scope.row)">{{ $t('shop.delete') }}</el-button>
          </template>
        </jc-table>
      </div>
      <jc-pagination
        :total="countryPagination.total"
        :page.sync="countryPagination.pageNum"
        :limit.sync="countryPagination.pageSize"
        @pagination="handleCountry"
      />
    </el-dialog>
    <!--  新增修改国家  -->
    <el-dialog
      v-dialogDrag
      :title="title"
      model
      :visible.sync="instCountry"
      :close-on-click-modal="false"
      width="500px"
    >
      <span>{{ $t('market.countryName') }}<!--国家名称-->：</span>
      <el-input v-model.trim="nationality" size="mini" style="width: 200px" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="instCountry = false">{{ $t('btn.cancel') }}</el-button>
        <el-button type="primary" @click="countConfig">{{ $t('btn.confirm') }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { queryFcountryList, insertCountry,
  updateCountry, deleteCountry } from '@/api/marketManage/customer/createCustomer'
export default {
  props: {
    msg: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      title: '新增国家',
      instCountry: false,
      nationality: '',
      fdetailid: '',
      openCountry: true, // 国家
      tableCountryData: [], // 国家数据
      tableHeader: [
        { label: this.$t('market.countryID'), prop: 'fdetailid' },
        { label: this.$t('market.countryName'), prop: 'fname' },
        { label: this.$t('market.handle'), type: 'btn', width: '200' }
      ], // 国家表头
      countryPagination: {
        fname: '',
        total: 0,
        pageNum: 1, // 当前页
        pageSize: 20 // 每页显示多少条数据
      },
      prodValue: { fcountryname: '', fcountry: '', isclientlDialog: true }
    }
  },
  created() {
    this.handleCountry()
  },
  methods: {
    // 国家
    async handleCountry() {
      const { data: res } = await queryFcountryList({
        ...this.countryPagination
      })
      this.tableCountryData = res.array
      this.countryPagination.total = res.total
    },
    // 国家选中
    countrySelectRow(item) {
      const { fname, fdetailid } = item
      const basic = this.prodValue
      basic.fcountryname = fname
      basic.fcountry = fdetailid
      this.$emit('country', this.prodValue)
    },
    // 关闭前回调
    handleClose() {
      this.$emit('country', this.prodValue)
    },
    // 新增国家
    installCoun() {
      this.title = this.$t('market.newCountry')
      this.instCountry = true
      this.fdetailid = ''
      this.nationality = ''
    },
    // 修改国家
    editCoun(ev) {
      this.title = this.$t('market.editCountry')
      this.instCountry = true
      this.nationality = ev.fname
      this.fdetailid = ev.fdetailid
    },
    // 确定
    countConfig() {
      const DATA = {
        fname: this.nationality,
        fdetailid: this.fdetailid
      }
      const api = this.fdetailid ? updateCountry : insertCountry
      api(DATA).then(res => {
        if (res.code === 0) {
          this.handleCountry()
          this.instCountry = false
          this.$message({ showClose: true, message: res.message, type: 'success' })
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            type: 'warning'
          })
        }
      })
    },
    // 删除
    delCountry(ev) {
      const DATA = {
        fdetailid: ev.fdetailid
      }
      this.$confirm('该操作将永久删除改国家，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        deleteCountry(DATA).then(res => {
          if (res.code === 0) {
            this.handleCountry()
            this.$message({ showClose: true, message: res.message, type: 'success' })
          } else {
            this.$confirm(res.message, '提示', {
              confirmButtonText: '确定',
              type: 'warning'
            })
          }
        })
      })
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  @include listBom;
}
</style>
